import React, {Component,Fragment} from 'React';
import './index.css';
import LazyLoad from 'react-lazyload'
import {NavLink} from 'react-router-dom'
export default class Slider extends Component{
    componentDidMount(){
        var swiper = new Swiper('.swiper-container', {
            autoplay:{
                delay:3000,
                disableOnInteraction: false,
            },
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            }
          });
        var comtainer = document.getElementById('swiper_container');
        comtainer.onmouseenter = function () {
            swiper.autoplay.stop();
        };
        comtainer.onmouseleave = function () {
            swiper.autoplay.start();
        }

    }
    render(){
        return(
            <Fragment>
                <div className="swiper-container" id="swiper_container">
                    <div className="swiper-wrapper">
                    <div className="swiper-slide">
                        <NavLink to='/prodetails'>
                            <img src='../../../public/indexHeader/img/slider1.png'/>
                        </NavLink>
                    </div>
                    <div className="swiper-slide">
                        <NavLink to='/prodetails'>
                            <img src='../../../public/indexHeader/img/slider2.png'/>
                        </NavLink>
                    </div>
                    <div className="swiper-slide">
                        <NavLink to='/prodetails'>
                            <img src='../../../public/indexHeader/img/slider1.png'/>
                        </NavLink>
                    </div>
                    <div className="swiper-slide">
                        <NavLink to='/prodetails'>
                            <img src='../../../public/indexHeader/img/slider2.png'/>
                        </NavLink>
                    </div>
                    </div>
                    <div className="swiper-pagination"></div>
                </div>
            </Fragment>
        )
    }
}
